<template>
    <div class="count">
        <h2>当前求和为: {{ sum }},放大10倍后: {{ bigSum }}</h2>
        <h3>欢迎就读{{ school }},坐落于{{ address }} 或者 {{ upperSchool }}</h3>
        <select v-model.number="num">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="plus">➕</button>
        <button @click="minu">➖</button>
    </div>
</template>

<script setup lang="ts" name="Count">
import { ref, toRefs } from 'vue';
import { useCountStore } from '@/store/count' // 引入 useCountStore
import { storeToRefs } from 'pinia';

const countStore = useCountStore() // 使用 useCountStore,得到一个专门保存 count 相关的 store
// storeToRefs 只会关注 store 中的数据,不会对方法进行 ref 包裹
const { sum, school, address, bigSum, upperSchool } = storeToRefs(countStore)
console.log(toRefs(countStore));
console.log(storeToRefs(countStore));


let num = ref(1) // 用户选择的数字

function plus() {
       countStore.increment(num.value)
}
function minu() {
    countStore.sum -= num.value
}
</script>

<style scoped>
.count {
    background-color: skyblue;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
}

select,
button {
    margin: 0 5px;
    height: 25px;
}
</style>